<script setup lang="ts">
import {ref} from 'vue'
import router from '@/router'
import {useBrokerStore} from '@/stores/brokerStore'
import service from '@/request/index.ts'
import {onMounted, onUnmounted} from 'vue'


const brokerStore = useBrokerStore()


const activeIndex = ref('1')

const routeMap: Record<string, string> = {
    '1': '/queue',     // 队列
    '2': '/consumer',  // 消费者信息
    '3': '/message'    // 消息查询
}

const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)

    // 根据 index 映射到路由路径
    const path = routeMap[key]
    if (path) {
        router.push(path)
    }
}

const brokerList = ref();

const broker = ref('');

const getBrokerInfo = async () => {
    const response: Map<string, string> = await service.get('/name-srv')
    // 转换为数组用于 v-for
    brokerList.value = Object.keys(response);

    // 设置默认 broker
    if (brokerList.value.length > 0 && !broker.value) {
        broker.value = brokerList.value[0];
        brokerStore.setBroker(brokerList.value[0]);
    }
}

// 定时器引用
let timer: number | null = null

// 组件挂载时启动定时器
onMounted(() => {
    getBrokerInfo(); // 首次立即执行

    timer = window.setInterval(getBrokerInfo, 5000) // 每5秒执行一次
})

// 组件卸载前清理定时器
onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
})


function changeBroker(item: string) {
    broker.value = item
    brokerStore.setBroker(item)
}

// 导航方法
function navigateTo(path: string) {
    router.push(path)
}
</script>

<template>
    <div class="header-container">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
        >
            <div class="menu-content">
                <el-sub-menu index="0">
                    <template #title>{{ broker }}</template>
                    <el-menu-item v-for="item in brokerList" :key="item" :index="item" @click='changeBroker(item)'>
                        {{ item }}
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item index="1-1" @click="navigateTo('/queue')">队列</el-menu-item>
                <el-menu-item index="2-1" @click="navigateTo('/consumer')">消费者信息</el-menu-item>
                <el-menu-item index="3-1" @click="navigateTo('/message')">消息查询</el-menu-item>
            </div>
            <div class="button-container">
                <el-button type="primary">退出登录</el-button>
            </div>
        </el-menu>
    </div>
</template>

<style scoped>
.header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* 确保菜单在其他内容之上 */
    background-color: #fff; /* 设置背景颜色避免透明 */
    height: 60px; /* 固定高度 */
    line-height: 60px; /* 垂直居中 */
}

.el-menu.el-menu--horizontal {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-content {
    display: flex;
    align-items: center;
}

.button-container {
    margin-right: 20px; /* 右边距，可根据需要调整 */
}
</style>
